var  postUrl = "http://localhost:8080/sub" ; 

var listbox = $('listbox');

var nodes = listbox.childNodes;
var msgs = new Array();
var dates = new Array();
var count = 0;
for ( var i = 0; i < nodes.length; i++) {
	
	if ("UL" == nodes[i].tagName) {

		var lis = nodes[i].childNodes;
		for ( var j = 0; j < lis.length; j++) {
			if ("LI" == lis[j].tagName) {
				
				//var title,date;
				for(var k=0;k<lis[j].childNodes.length;k++){
					if('A'==lis[j].childNodes[k].tagName){
						
						msgs[count] = lis[j].childNodes[k].innerHTML;
					}
					else if('SPAN'==lis[j].childNodes[k].tagName){
						
						dates[count]=lis[j].childNodes[k].innerHTML;
					}
					
				}
				//alert(title+" "+date);
				var con= document.createElement('div');
				con.style.cssText="height:20px;float:left;margin-right:0px";
//				con.height='20';
				
				
				var a1 = document.createElement("img");
                a1.src="http://bcs.duapp.com/baidu-api/pic2.png";
                a1.height="20";
                a1.setAttribute("index",count);
                //alert("attr"+a1.getAttribute("index"));
                a1.onclick=function(event){alertok(event);};
                count++;
                //a1.style.cssText="float:right;margin-right:80px;";
                var a2 = document.createElement("div");
                a2.height='20px';
                a2.style.cssText="float:right;width:50px; height:20px;background:url(http://bcs.duapp.com/baidu-api/pic3.png) no-repeat left center;background-size:50px 20px;";
       
                con.appendChild(a1);
                con.appendChild(a2);
                var a3 = document.createElement('div');
                //a3.height='20';
                a3.style.cssText='height:20px;line-height:20px;vertical-align:middle;';
                var randomInt = Math.floor((Math.random()*1000)%1000);
                a3.setAttribute("wnum",randomInt);
                a3.innerHTML=generateWnumText(randomInt);
                a2.appendChild(a3);
                lis[j].appendChild(con);
            
			}
		}
	}
}

function $(elementId) {
	return document.getElementById(elementId);
}

function alertok(e){
	var src = e.target || window.event.srcElement;
	var i = parseInt(src.getAttribute("index"));
	var html='<table align=center><tr><td >Email:</td><td colspan=2><input type="text" id="email"/></td><tr><tr><td>Phone:</td><td colspan=2><input type="text" id="phone"/></td><tr>'+
		'<tr><td><input type="checkbox">small</input></td><td><input type="checkbox">middle</input></td><td><input type="checkbox">big</input></td></tr></table>';
	sAlert(html,0,msgs[i],dates[i],src);
}
function generateWnumText(wnum){
    return '<font color=0x1111EE bold><b>&nbsp;&nbsp;'+wnum+'</b></font>';
}
function sAlert(str,time,msgtitle,msgdate,imgTarget){ 
	   var msgw,msgh,bordercolor; 
	   msgw=400;//Width
	   msgh=150;//Height 
	   titleheight=25; //title Height
	   bordercolor="#1111EE";//boder color
	   titlecolor="#99CCFF";//title color
	   var sWidth,sHeight; 
	   sWidth=document.body.offsetWidth; 
	   sHeight=screen.height+300; 
	   var bgObj=document.createElement("div"); 
	   bgObj.setAttribute('id','bgDiv'); 
	   bgObj.style.position="absolute"; 
	   bgObj.style.top="0"; 
	   bgObj.style.background="#000"; 
	   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
	   bgObj.style.opacity="0.6"; 
	   bgObj.style.left="0"; 
	   bgObj.style.width=sWidth + "px"; 
	   bgObj.style.height=sHeight + "px"; 
	   bgObj.style.zIndex = "10000"; 
	   document.body.appendChild(bgObj); 
	   var msgObj=document.createElement("div"); 
	   msgObj.setAttribute("id","msgDiv"); 
	   msgObj.setAttribute("align","center"); 
	   msgObj.style.background="white"; 
	   msgObj.style.border="1px solid " + bordercolor; 
	   msgObj.style.position = "absolute"; 
	   msgObj.style.left = "50%"; 
	   msgObj.style.top = "50%"; 
	   msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
	   msgObj.style.marginLeft = "-225px" ; 
	   msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 
	   msgObj.style.width = msgw + "px"; 
	   msgObj.style.height =msgh + "px"; 
	   msgObj.style.textAlign = "center"; 
	   msgObj.style.lineHeight ="25px"; 
	   msgObj.style.zIndex = "10001"; 
	   var title=document.createElement("h4"); 
	   title.setAttribute("id","msgTitle"); 
	   title.setAttribute("align","center"); 
	   title.style.margin="0"; 
	   title.style.padding="3px"; 
	   title.style.background=bordercolor; 
	   title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
	   title.style.opacity="0.75"; 
	   title.style.border="1px solid " + bordercolor; 
	   title.style.height="18px"; 
	   title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
	   title.style.color="white"; 
	  
	   var waitMsg="Click to Confirm";
	   
	   title.innerHTML=waitMsg;
	   var sec=time;
	   var ready=function(){
		 //alert("ok...");  
	   };
	   var clearAlertFun=function(){ 
		   		
		   		var phone = $('phone').value;
		   		var email = $('email').value;
		   		//alert(msgtitle+","+msgdate+","+phone+","+email);
	            document.body.removeChild(bgObj); 
	            document.getElementById("msgDiv").removeChild(title); 
	            document.body.removeChild(msgObj);
	            getResult(postUrl,"phone="+phone+"&email="+email+"&title="+msgtitle+"&date="+msgdate,ready);
	            imgTarget.src="http://bcs.duapp.com/baidu-api/pic1.png";
	            var wnumTarget=imgTarget.nextSibling.firstChild;
	            var newWnum=parseInt(wnumTarget.getAttribute("wnum"))+1;
	            wnumTarget.setAttribute("wnum",newWnum);
	            wnumTarget.innerHTML=generateWnumText(newWnum);
	          };
	          
	   title.onclick=clearAlertFun;
//	   timerID=window.setInterval(function(){
//	   try{
//	   if(sec<0){
//	     title.onclick=clearAlertFun;
//	     title.style.cursor="pointer"; 
//	          window.clearInterval(timerID);
//	          document.getElementById("msgTitle").innerHTML='Click to close';
//	   }else
//	   document.getElementById("msgTitle").innerHTML=waitMsg+sec--+'s';
//	   }catch(e)
//	   {
//	    window.clearInterval(timerID);
//	   }
//	  ;},1000);
	  
	   document.body.appendChild(msgObj); 
	   document.getElementById("msgDiv").appendChild(title); 
	   var txt=document.createElement("p"); 
	   txt.style.margin="1em 0" ;
	   txt.setAttribute("id","msgTxt"); 
	   txt.innerHTML=str; 
	   document.getElementById("msgDiv").appendChild(txt); 
	} 
	function   cAlert()
	{
	  document.body.removeChild(document.getElementById("bgDiv")); 
	        document.getElementById("msgDiv").removeChild(document.getElementById("msgTitle")); 
	        document.body.removeChild(document.getElementById("msgDiv")); 
	}
	function getResult(url,postData, ready) {
		 var xmlHttp;
		 var r = function() {

		  if (xmlHttp.readyState == 4) {
		   if (xmlHttp.status == 200) {
		    //alert(isIE);

		    var xmlstr;
		    var xmldoc;
		    var isIE = !!(window.attachEvent && !window.opera);
		    if (isIE)
		     xmldoc = xmlHttp.responseXML;
		    else {

		     xmlstr = xmlHttp.responseText;
		     //alert(xmlstr);
		     //var parser = new DOMParser();

		     //xmldoc = parser.parseFromString(xmlstr, "text/xml");
		    }
		    try {
		     ready(xmlstr);
		    } catch (e) {
		     alert(e.message);
		    }
		   }
		  }
		 }

		 var create = function(url, r) {

		  try {
		   // Firefox, Opera 8.0+, Safari
		   xmlHttp = new XMLHttpRequest();
		  } catch (e) {

		   // Internet Explorer
		   try {
		    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		   } catch (e) {

		    try {
		     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		    } catch (e) {
		     alert("ajax error");
		     return false;
		    }
		   }
		  }
		 
		  xmlHttp.onreadystatechange = r;
		  xmlHttp.open("POST", url, true);
		  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		  xmlHttp.setRequestHeader("Content-length", postData.length);
		  xmlHttp.setRequestHeader("Connection", "close");
		  //alert(url);
		  //alert(postData);
		  xmlHttp.send(postData);

		 }
		 create(url, r);

		}